<template>
    <div id="reverse">
        <h2>{{ msg }}</h2>
        <h2>{{ msg.split('').reverse().join('') }}</h2>
        <h2>{{ rvMsgF() }}</h2>
        <h2>{{ rvMsgF() }}</h2>
        <h2>{{ rvMsg }}</h2>
        <h2>{{ rvMsg }}</h2>
        <input v-model="msg">
    </div>
</template>

<script>
import { ref, computed, watch } from "vue";

export default {
    setup() {
        const msg = ref("Hello Vue");
        function rvMsgF() {
            console.log('f');
            return msg.value.split('').reverse().join('');
        }
        // 计算属性 只触发一次就能一直保存数据 缓存
        const rvMsg = computed(() => {
            console.log('rvmsg');
            return msg.value.split('').reverse('').join('');
        });
        // 侦听器
        watch(msg, (newValue, oldValue) => {
            console.log('旧的'+oldValue+',新的'+newValue);
        })
        return {
            msg,
            rvMsgF,
            rvMsg,
        }
    }
}
</script>

<style></style>